<template>
    <span class="icon" :class="classMapSelect(type)"></span>
</template>

<script>
    export default {
        name: 'ClassMap',
        props: {
            type: {
                type: Number
            },
            imageType: {
                type: Number,
                default: 1
            },
        },
        data() {
            return {
                classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
            }
        },
        methods: {
            classMapSelect(type) {
                return this.imageType === 4 ? `${this.classMap[type]}_4` : `${this.classMap[type]}_1`;
            }
        }
    }
</script>

<style scoped>
    .icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 4px;
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: top;
    }

    .decrease_1 {
        background-image: url('img/decrease_1@2x.png');
    }

    .discount_1 {
        background-image: url('img/discount_1@2x.png');
    }

    .guarantee_1 {
        background-image: url('img/guarantee_1@2x.png');
    }

    .invoice_1 {
        background-image: url('img/invoice_1@2x.png');
    }

    .special_1 {
        background-image: url('img/special_1@2x.png');
    }

    .decrease_4 {
        background-image: url('img/decrease_4@2x.png');
    }

    .discount_4 {
        background-image: url('img/discount_4@2x.png');
    }

    .guarantee_4 {
        background-image: url('img/guarantee_4@2x.png');
    }

    .invoice_4 {
        background-image: url('img/invoice_4@2x.png');
    }

    .special_4 {
        background-image: url('img/special_4@2x.png');
    }

    @media (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3){
        .decrease_1 {
            background-image: url('img/decrease_1@3x.png');
        }

        .discount_1 {
            background-image: url('img/discount_1@3x.png');
        }

        .guarantee_1 {
            background-image: url('img/guarantee_1@3x.png');
        }

        .invoice_1 {
            background-image: url('img/invoice_1@3x.png');
        }

        .special_1 {
            background-image: url('img/special_1@3x.png');
        }

        .decrease_4 {
            background-image: url('img/decrease_4@3x.png');
        }

        .discount_4 {
            background-image: url('img/discount_4@3x.png');
        }

        .guarantee_4 {
            background-image: url('img/guarantee_4@3x.png');
        }

        .invoice_4 {
            background-image: url('img/invoice_4@3x.png');
        }

        .special_4 {
            background-image: url('img/special_4@3x.png');
        }
    }
</style>